<template>
    <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="ResetFrom" status-icon ref="ResetFrom">
                <el-row>
                    <el-col :span="12">
                        <div class="depart-box">
                            <div class="slect-title">时间范围</div>
                            <el-date-picker
                                v-model="EstablishTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('ResetFrom')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <div class="add-btns fl">
            <kt-button
                label="自主外呼时间"
                perms="true"
                :size="size"
                type="primary"
                @click="handlePhoneTime"
                style="float:left;"
            />
        </div>
        <!-- 导出按钮 -->
        <!-- <div class="add-btns">
            <kt-button
            :disabled='loadingInfo'
                :label="$t('查看详情')"
                perms="customerstatistics:studentStatisticsDays:tosee"
                type="primary"
                @click="tosee"
            />
        </div> -->
        <!--表格内容栏-->
        <StTable
            class="table-width"
            :showBatchDelete="false"
            :loading="loading"
            :data="pageResult"
            :columns="columns"
            @findPage="findPage"
        ></StTable>
        <!-- 填写自主外呼时间 -->
        <el-dialog
            :title="'填写自主外呼时间'"
            width="30%"
            :visible.sync="phoneTimeShow"
            :close-on-click-modal="false"
            center
        >
            <el-input v-model="phoneTime" placeholder="外呼时间，请自主转换为秒">
                <template slot="prepend">外呼时间</template>
            </el-input>
            <span
                style="color:red;font-size:10px;display:inline-block;margin-top:10px;"
            >温馨提示：自主外呼时间只能修改一次，请谨慎填写！（ 时间单位为：秒 ）</span>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click.native="phoneTimeShow = false">{{$t('action.cancel')}}</el-button>
                <el-button size="small" @click.native="phoneTimeSubmit">{{$t('提交')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import api from "@/http/api";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import Cookies from "js-cookie";
export default {
    name: "Student",
    components: {
        PopupTreeInput,
        StTable,
        KtButton,
        CrmSwitch
    },
    data() {
        return {
            size: "small",
            filters: {
                name: ""
            },
            pageResult: {
                content: []
            },
            // 查询条件
            ResetFrom: {
                userName: "",
                userid: "",
                realName: "",
                phone: "",
                threeLevelDepartment: "",
                DateTime: "",
                dateEnd: "",
                dateStart: "",
                pageNum: 0,
                pageSize: 0,
                startTime: "",
                endTime: "",
                listUserId: []
            },
            EstablishTime: [],
            threeDept: "",
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "createDate", label: "日期", minWidth: 100 },
                { prop: "tqNum", label: "账号", minWidth: 80 },
                { prop: "userStr", label: "姓名", minWidth: 80 },
                { prop: "deptStr", label: "部门名称", minWidth: 80 },
                { prop: "debugAmount", label: "调试个数", minWidth: 80 },
                { prop: "auditionAmount", label: "一对一试听量", minWidth: 80 },
                { prop: "luboExperienceAmount", label: "录播体验量", minWidth: 80 },
                { prop: "resourcesAmount", label: "CRM资源量", minWidth: 80 },
                { prop: "typeAAmount", label: "A", minWidth: 80 },
                { prop: "typeBAmount", label: "B+", minWidth: 80 },
                { prop: "typeB1Amount", label: "B-", minWidth: 80 },
                { prop: "typeCAmount", label: "C", minWidth: 80 },
                { prop: "trackAmount", label: "电话量", minWidth: 80 },
                { prop: "callTimeStr", label: "通话时长", minWidth: 180 },
                { prop: "callTimeOwnStr", label: "咨询师手填外呼时长", minWidth: 180 },
                { prop: "callTimeTotalStr", label: "通话时间总和", minWidth: 180 }
                
            ],

            pageRequest: { pageNum: 1, pageSize: 30 },
            deptId: Cookies.get("threeLevelDeptId"),
            loading: false, // 加载标识
            student_data_from_options: [],
            loadingInfo:true,
            phoneTimeShow:false,
            phoneTime:''
        };
    },
    methods: {
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }

            this.ResetFrom.pageSize = this.pageRequest.pageSize;
            this.ResetFrom.pageNum = this.pageRequest.pageNum;
            if (this.ResetFrom.startTime == "" || !this.ResetFrom.startTime) {
                
            }
            this.$api.student
                .userWorkloadStatistics(this.ResetFrom)
                .then(res => {
                    //以下3个返回参数，需要根据自己业务去判断，处理返回信息
                    let result = res.data;
                    let errorCode = res.errorCode;
                    let msg = res.msg;

                    let content = {
                        content: res.data,
                        totalSize: res.total
                    };
                    this.pageResult = content;
                    this.loading = false;
                    this.loadingInfo=false
                })
                .then(data != null ? data.callback : "");
        },

        // 重置
        reset(ResetFrom) {
            this.$refs.ResetFrom.resetFields();
            this.EstablishTime = "";
            this.ResetFrom.userName = "";
            this.pageRequest.pageNum = 1;
            this.ResetFrom.startTime = "";
            this.ResetFrom.endTime = "";
            this.pageResult.content = [];
            this.pageResult.total = 0;
            this.loadingInfo=true
            this.findPage(null);
        },
        // 查询
        search() {
            this.ResetFrom.startTime = this.EstablishTime[0];
            this.ResetFrom.endTime = this.EstablishTime[1];
            this.loading = true;
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        // 导出
        exportFile() {
            axios({
                method: "get",
                url:
                    baseUrl + "/studentTypeStatistics/exportUserTypeStatistics",
                params: this.ResetFrom
            }).then(res => {
                window.open(res.request.responseURL);
            });
        },
        // 查看详情
        tosee(){
          if (this.ResetFrom.startTime == "" || !this.ResetFrom.startTime) {
              this.$message({ message: "请选择日期！", type: "error" });
              this.loading = false;
              return false;
          }
          this.$router.push({
              path: '/Customerstatistics/StudentStatisticsDaysInfo',
              query: {
                    'startTime': this.ResetFrom.startTime,
                    'endTime':this.ResetFrom.endTime
              }
          });
        },
        // 获取来源
        get_student_data_from() {
            this.student_data_from_options = JSON.parse(
                localStorage.getItem("studentSource")
            );
        },
        handlePhoneTime(){
            this.phoneTimeShow=true
            this.$api.student
            .queryUserOwnCallTime()
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    // if(res.msg='执行成功'){
                    //     this.phoneTime=''
                    // }else{
                    //     this.phoneTime=res.msg
                    // }
                    this.phoneTime=res.msg
                    
                }
            });
        },
        phoneTimeSubmit(){
            this.$api.student
            .setUserOwnCallTime({
                time: this.phoneTime
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: "error" });
                } else {
                    this.$message({ message: res.msg, type: "success" })
                    this.phoneTimeShow=false
                    this.phoneTime=''
                }
            });
        }
    },
    mounted() {
        this.get_student_data_from();
    }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style scope>
.add-btns .el-button:nth-child(1) {
    margin-right: 10px;
}
</style>

